<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='300' height='300'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
    var aCanvas = new OffscreenCanvas(300, 300);
    var ctx = aCanvas.getContext('2d');

    ctx.shadowBlur = 5;
    ctx.shadowColor = "black";
    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            ctx.save();
            ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
            ctx.shadowOffsetY = 2 + i;
            ctx.shadowOffsetX = 2 + j;
            ctx.translate(10 + j * 50, 10 + i * 50);
            ctx.fillRect(0, 0, 25, 25);
            ctx.restore();
        }
    }

    var image = aCanvas.transferToImageBitmap();
    self.postMessage(image, [image]);
};
</script>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}
var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
  var outputCtx = document.getElementById('output').getContext('bitmaprenderer');
  outputCtx.transferFromImageBitmap(msg.data);
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});
worker.postMessage("");
</script>
</body>
</html>
